/*
 * @Author: HuashengA 
 * @Date: 2018-09-24 18:53:49 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-10-05 10:15:10
 */
<template>
    <div class="register">
        <header-login></header-login>
        <div class="register-content">
            <el-main>
                <el-card class="box-card" shadow="hover">

                    <div class="icon theme-color">
                        伴你长高-
                        <i class="fa fa-heart fa-color"></i>-伴你征讨
                    </div>

                    <el-tabs v-model="activeName">
                        <el-tab-pane label="快速注册" name="first">
                            <el-form :rules="registerRules" ref="registerFrom" label-position="left" label-width="80px" :model="registerFrom">
                                <el-form-item label="用户名" prop="username">
                                    <el-input v-model="registerFrom.username"  @blur="checkValue('username',registerFrom.username)" clearable placeholder="用户名长度为3~18个字符">
                                        <i slot="prefix" class="fa fa-user-o"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input type="password" v-model="registerFrom.password" clearable placeholder="密码长度为3~20个字符">
                                        <i slot="prefix" class="fa fa-key fa-fw"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="confirmPwd">
                                    <el-input type="password" v-model="registerFrom.confirmPwd" clearable placeholder="请再次输入密码">
                                        <i slot="prefix" class="fa fa-key fa-fw"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button style=" width:100%" type="primary" @click="register('registerFrom')">快速注册</el-button>
                                </el-form-item>
                            </el-form>

                        </el-tab-pane>
                        <el-tab-pane label="注册" name="second">
                            <el-form :rules="registerRules2" ref="registerFrom2" label-position="left" label-width="80px" :model="registerFrom">
                                <el-form-item label="用户名" prop="username">
                                    <el-input v-model="registerFrom.username" @blur="checkValue('username',registerFrom.username)" clearable placeholder="用户名长度为3~18个字符">
                                        <i slot="prefix" class="fa fa-user-o"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input type="password" v-model="registerFrom.password" clearable placeholder="密码长度为3~20个字符">
                                        <i slot="prefix" class="fa fa-key fa-fw"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="confirmPwd">
                                    <el-input type="password" v-model="registerFrom.confirmPwd" clearable placeholder="请再次输入密码">
                                        <i slot="prefix" class="fa fa-key fa-fw"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="手机号" prop="phone">
                                    <el-input v-model="registerFrom.phone" @blur="checkValue('username',registerFrom.phone)" clearable placeholder="请输入手机号">
                                        <i slot="prefix" class="fa fa-mobile-phone"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email">
                                    <el-input type="email" v-model="registerFrom.email" @blur="checkValue('username',registerFrom.email)" clearable placeholder="请输入邮箱">
                                        <i slot="prefix" class="fa fa-envelope-o fa-fw"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="设置问题" prop="question">
                                    <el-input v-model="registerFrom.question" clearable placeholder="通过该回答问题找回密码">
                                        <i slot="prefix" class="fa fa-question-circle-o"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="我的答案" prop="answer">
                                    <el-input v-model="registerFrom.answer" clearable placeholder="请回答 1988">
                                        <i slot="prefix" class="fa fa-unlock"></i>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="sex" class="radio-group">
                                    <el-radio-group v-model="registerFrom.sex">
                                        <el-radio label="1" border>男</el-radio>
                                        <el-radio label="2" border>女</el-radio>
                                        <el-radio label="3" border>保密</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-button style=" width:100%" type="primary" @click="register('registerFrom2')">注册</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>

                    <div class="link-item">
                        <router-link to="/login" class="link">马上登录>></router-link>
                    </div>

                </el-card>
            </el-main>
        </div>
    </div>

</template>
<script type="text/ecmascript-6">
import index from '@/assets/js/register/register.js'
export default {
    ...index
}
</script>

<style scoped lang="scss">
@import '@/assets/css/register/register.scss';
</style>
